<template>
  <view class="product-with-price flex-column justify-between">
    <view class="product-with-price-title flex-row">
      <view class="product-with-price-title-img">
        <up-image :src="item.product_img  || 'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/default.png'" :lazy-load="true" width="132rpx" height="132rpx" radius="10">
          <template #error>
            <view style="font-size: 24rpx;">暂无图片</view>
          </template>
        </up-image>
      </view>
      <view class="product-with-price-title-text">
        <view class="product_name">{{ $ftext(item.product_name) }}</view>
<!--        <view class="product_pno">{{ $ftext(item.pno) }}</view>-->
        <view class="product_unit flex-row  items-center justify-between">
          <view>
            {{ $ftext(item.product_guige) }}
          </view>
          <view class="price-box flex-row  items-center justify-between" @click="$emit('on-edit', item)">
                <view class="price-box-num">
                  {{ item.price }}
                </view>
                <view class="price-box-unit">
                  元
                </view>
          </view>
        </view>
      </view>
    </view>
    <view class="line"></view>
  </view>
</template>

<script setup lang="ts">
/**
 * @author:  xphu
 * @description 商品清单 cell
 * @param { object} data - 对象{ type: 'loading', message: "加载中"}  
 */
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="scss" scope>
.product-with-price {
  height: 160rpx;
  padding: 24rpx 24rpx 0 24rpx;
  &-title{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &-img{
      width: 132rpx;
      height: 132rpx;
    }
    &-text{
      margin-left: 20rpx;
      flex: 1;
      padding-bottom: 26rpx;
      .product_name{
        height: 36rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #1A1C27;
        line-height: 36rpx;
        padding-bottom: 26rpx;
      }
      .product_pno{
        background: #F5F5F5;
        border-radius: 4rpx;
        height: 32rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #7F7F7F;
        line-height: 32rpx;
        margin-right: 24rpx;
        text-align: center;
        display: inline-block;
        padding: 0 8rpx;
        margin-top: 12rpx;
      }
      .product_unit{
        height: 36rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #7F7F7F;
        line-height: 36rpx;
        margin-top: 12rpx;
      }
      .price-box{
        width: 210rpx;
        height: 68rpx;
        border-radius: 12rpx;
        border: 2rpx solid #ECECEC;
        .price-box-num{
          padding-left: 24rpx;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #1B1A1D;
          line-height: 44rpx;
        }
        .price-box-unit{
          width: 28rpx;
          height: 40rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1B1A1D;
          line-height: 40rpx;
          padding-right: 24rpx;
        }
      }
    }
  }
  .line{
    height: 2rpx;
    background: #F4F5F8;
    // margin-top: 24rpx;
  }
}
</style>
